<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/mui.css"/>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/general.css"/>
		<link rel="stylesheet" type="text/css" href="../css/lcs-font.css"/>
		<style type="text/css">
			
			.hcont{
				width:80%;
				position:absolute;
				top: 50%;
				-webkit-transform: translateY(-50%);
			    transform: translateY(-50%);
			    left:44px;
			    text-align: center;
			    height: 44px;
			    display: flex;
			    justify-content: center;
			    align-items: center;
			    color: white;
			}
			
			.hcleft{
				width: 30%;
				height: 30px;
				line-height: 30px;
				display: block;
				border-top-left-radius: 5px;
				border-bottom-left-radius: 5px;
			}
			.bone{
				background-color: white;
				color: #666666;
			}
			.btow{
				background-color: #0076FF;
				color: white
			}
			.hcright{
				width: 30%;
				height: 30px;
				line-height: 30px;
				border-top-right-radius: 5px;
				border-bottom-right-radius: 5px;
			}
			a{ 
				text-decoration:none; 
				
			} 
			
			.cmain{
				width: 100%;
				padding-top: 5px;
			}
			.topdiv{
				width: 100%;
				display: flex;
				justify-content: center;
				align-content: center;
				background-color: white;
			}
			.topdiv>div{
				height: 3em;
				position: relative;
				flex: auto;
				text-align: center;
				line-height: 3em;
			}
			.brno{
				border-right: 0 !important;
			}
 



.content{
				width: 100%;
				background-color: #F2F2F2;
				padding: 10px;
			}
			.search{
				display: flex;
				justify-content: center;
				align-content: center;
				padding: 10px;
				background-color: white;
			}
			.simg{
				width: 30px;
				height: 30px;
			}
			.simg>img{
				width: 100%;
				height: 100%;
			}
			.ssdiv{
				width: 75%;
			}
			.ssinp{
				width: 100%;
				height: 100%;
				border: 0;
				padding-left: 20px;
			}
			.textmain{
				width: 100%;
				height: auto;
			}
			.textlist{
				width: 100%;
				height: auto;
				padding: 10px;
				background-color: white;
				margin: 5px auto;
			}
			.textlist>div{
				padding: 2px;
			}
			.div1{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.dx{
				width: 95%;
				margin: auto;
				height: 1px;
				background-color: #C7C7CC;
				
			}
			.bor-bot{
				padding-bottom: 10px !important;
				border-bottom: 1px solid #C7C7CC;
			}
			.mf{
				margin-left: 10px;
			}
			.mr{
				margin-right: 10px;
			}
			
			.footdiv2{
				position: fixed;
				bottom: 0;
				width: 100%;
				height: 4em;
				background-color: white;
			}
			.foottop{
				width: 100%;
				height: 40%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0px 10px;
			}
			.footbot{
				width: 100%;
				height: 60%;
				background-color: #3C98FF;
				display: flex;
				justify-content: space-around;
				align-items: center;
				color: white;
			}
			.footbot>span{
				display: block;
				width: 50%;
				text-align: center;
				height: 100%;
				line-height: 2.4em;
			}
			.fgd2{
				width: 100%;
				height: 4em;
			}
			.footbot>span:first-child{
				border-right: 1px solid white;
			}
			
			
.active{
  color: red;
}

.active::after {
  content: " ";
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  border-bottom: 0.1em solid red;
  transition: 0.2s all linear;
}
.active1::after {
  content: " ";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  border-bottom: 0.1em solid red;
  transition: 0.2s all linear;
}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		  	<h1 class="mui-title">员工预约</h1>
		  <!--
           	作者：592176224@qq.com
           	时间：2019-01-26
           	描述：
		   <div class="hcont" id="hcont">
		    	<div class="hcleft bone" href="#" id="1">
		    		员工预约
		    	</div>
		    	 <div class="hcright btow" href="#" id="2">
		    	 	客户预约
		    	 </div>
		    </div>
           -->
		    <div class="hright" id="lbdiv">
		    	预约列表
		    </div>
		</header>
		<div class="mui-content">
			<div id="ygyy" >
				
			
		   <div class="cmain">
		    	<div class="topdiv" id="topdiv">
			    	<div class="active border-r"  id="1">
			    		预约中
			    	</div>
			    	<div class="active1 border-r"  id="2">
			    		已到店
			    	</div>
			    	<div class="active1" id="3">
			    		已取消
			    	</div>
		    	</div>
		    </div>
		    
		  	<div class="content">
		    	<div class="search">
		    		<div class="simg">
		    			<img src="../img/ss-img2.png"/>
		    		</div>
		    		<div class="ssdiv">
		    			<input class="ssinp" type="" name="" id="" value=""  placeholder="请输入关键词检索"/>
		    		</div>
		    		<div class="simg">
		    		</div>
		    	</div>
		    </div>
		    
		    <div class="textmain" id="tlist">
		    	<!--
                	作者：592176224@qq.com
                	时间：2018-12-29
                	描述：
               
		    	<div class="textlist">
		    		<div class="div1">
		    			<div class="">
		    				会员：张三（100022）
		    			</div>
		    			<div class="">
		    				<button type="button" class="mui-btn mui-btn-blue mui-btn-outlined">按钮</button>
		    				<button type="button" class="mui-btn mui-btn-blue mui-btn-outlined">按钮</button>
		    			</div>
		    		</div>
		    		<div class="div1">
		    			<div class="">
		    				项目：洗剪吹
		    			</div>
		    			<div class="">
		    				数量：1
		    			</div>
		    		</div>
		    		<div class="div1 bor-bot">
		    			<div class="">
		    				备注：
		    			</div>
		    			<div class="">
		    				预约员工：店长
		    			</div>
		    		</div>
		    		
		    		<div class="div1">
		    			预约时间：2018-12月12日周三上午9:00-12:00
		    		</div>
		    	</div>
		    	 -->
		    </div>
		    <div class="morediv hidden" id="moreid">
		   		<span onclick="more_list()">更多</span>
		   	</div>
		   
		    <div class="fgd2"></div>
		    <div class="footdiv2">
		    	<div class="foottop" id="footdivid">
		    		<span id="">
		    			预约中：2 个
		    		</span>
		    		<span id="">
		    			会员数:1
		    		</span>
		    	</div>
		    	<div class="footbot">
		    	<span id="addTheBooking" class="colorw">
		    		添加预约
		    	</span>
		    	<span id="releaseTheBooking" class="colorw">
		    		发布预约
		    	</span>
               
		    	</div>
		    </div>
		    </div>
		    
		    
		    
		    <div id="khyy" class="hidden">
		    	<div class="textmain" id="blist">
		    			
		    	</div>
		    </div>
		    
		</div>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var gettype = 1,status = 1,
				page = 1,
				ylist = [];
				
			var glist = [];	
			window.onload = function(){
				/*
				$("#hcont").on("tap","div",function(){
					var target = this.getAttribute('id');
					console.log(target);
					if(gettype != target){
					$(this).addClass('bone').removeClass('btow').siblings().removeClass('bone').addClass('btow');
					gettype = target;
					if(gettype==1){
						g("ygyy").className = 'show';
						g("khyy").className = 'hidden';
						//gettlist(3);
						//getappointment();
					}else{
						g("ygyy").className = 'hidden';
						g("khyy").className = 'show';
						//getblist(3);
					}
					}
				})*/
				//预约状态
				$("#topdiv").on("tap","div",function(){
					var target = this.getAttribute('id');
					console.log(target);
					if(status != target){
						status = target;
						$(this).removeClass("active1").addClass("active").siblings().removeClass("active").addClass("active1")
						ylist = [];
						getappointment();
					}
				})
				
				//预约列表
				$("#lbdiv").on("tap",function(e){
					mui.openWindow({
						url:'childPages/theReservationList.html',
						id:'theReservationList'
					})
				})
				//添加预约
				$("#addTheBooking").on("tap",function(e){
					mui.openWindow({
						url:'reservation/addTheBooking.html',
						id:'theReservationList'
					})
				})
				
				//发布预约
				$("#releaseTheBooking").on("tap",function(e){
					mui.openWindow({
						url:'reservation/release-list.html',
						id:'release-list'
					})
//					mui.openWindow({
//						url:'reservation/releaseTheBooking.html',
//						id:'theReservationList'
//					})
				})
				
				getappointment();
				//getblist(3);
			}
			function getappointment(){
				var data = {
					url:"/api/appointment/lst",
					data:{
						access_token:acctoken(),
						status:status,
						page:page
					}
				}
				ajax(data,function(res){
					console.log("预约列表",res);
					let list = res.data.data;
					if(list.length > 0){
						list.forEach(function(item,index){
							ylist.push(item);
						})
						ylist = remove_duplicate(ylist);
						settlist(ylist);
						$("#moreid").removeClass("hidden");
						if(list.length < res.data.per_page){
							$("#moreid").addClass("hidden");
						}
					}else{
						if(page == 1){
							let str = `<div class="nolistdiv">暂无记录<div>`
							g("tlist").innerHTML = str;
							
							$("#moreid").addClass("hidden");
						}else{
							page--
							$("#moreid").addClass("hidden");
							mui.toast('没有更多数据了');
						}
					}
					setfootdiv(ylist);
					//settlist(res.data.data);
					//setfootdiv(res.data.data);
				})
			}
			function setfootdiv(data){
				var arrlist = [];
				for(var i = 0;i < data.length; i++){
					if(arrlist.indexOf(data[i].member_id) == -1){
						arrlist.push(data[i].member_id);
					}
				}
				var str = '<span id="">预约中：'+
							data.length+
						'个</span><span id="">会员数:'+
		    			arrlist.length+
		    			'</span>';
				g("footdivid").innerHTML = str;
			}
			function settlist(data){
				var str = '';
				if(data.length>0){
					for (var i = 0; i <data.length; i++){
					    str += '<div class="textlist"><div class="div1"><div class="">'+
							data[i].username+
			    			'</div><div class="">';
			    			if(data[i].status == "预约中"){
			    				str+='<button type="button" onclick="setappointment('+data[i].id+',3)" class="mui-btn mui-btn-blue mui-btn-outlined mr">取消预约</button>'+
			    			'<button type="button" onclick="setappointment('+data[i].id+',2)" class="mui-btn mui-btn-blue mui-btn-outlined">到店确认</button>';
			    			}else if(data[i].status == "已到店"){
			    				str+='<div>已到店</div>';
			    			}else if(data[i].status == "已取消"){
			    				str+='<div>已取消</div>';
			    			}
			    			str+='</div></div><div class="div1"><div class="">项目：'+
			    			data[i].product_name+
			    			'</div><div class="">数量：'+
			    			data[i].count+
			    			'</div></div><div class="div1 bor-bot"><div class="">备注：'+
			    			data[i].remark+
			    			'</div><div class="">预约员工：'+
			    			data[i].emplyee_name+
			    			'</div></div>'+
			    		'<div class="div1">'+
			    			'<div class="">预约时间：'+
			    			data[i].appointment_time + ' ' +data[i].start_time+ ' ~ ' +
			    			data[i].end_time+
			    			'</div><div class="">'+
			    			data[i].appointment_type+
			    			'</div>'+
			    		'</div></div>';
					}
				}else{
					str = '<div class="nolistdiv">暂无预约</div>';
				}
				g("tlist").innerHTML = str;
				
				
				
			}
			function setappointment(id,status){
				console.log(id);
				console.log(status);
				var data = {
					url:"/api/appointment/operate",
					data:{
						access_token:acctoken(),
						id:id,
						status:status,
					}
				}
				ajax(data,function(res){
					console.log(res);
					mui.toast(res.msg);
					ylist = [];
					getappointment();
				})
			}
			
			
			//更多
			function more_list(){
				page++;
				getappointment();
			}
			//刷新
			function onshow(){
				page = 1;
				ylist = [];
				getappointment();
			}
		</script>
	</body>

</html>